import React,{Fragment} from 'react';
//虚拟组件Fragment就是可以作为父容器,但是不会真是的渲染到页面之中
import Boil from './Boil';
import TemInput from './TemInput';
import tryConvert from './utils.js'

class Cal extends React.Component{
//组件受控
//1. vaLue属性
//2. onChange处理函数
    // 因为在react中，input是受控组件
    state = {
        val: '',
        scale:'c'
    }
    // 在父组件上定义两个处理函数
    handleC=(tem)=>{
        console.log(tem);//打印的结果是我们在输入框中输入的内容
        this.setState({
            val:tem,
            scale:'c'
        })
    }
    handleF=(tem)=>{
        console.log(tem);//打印的结果是我们在输入框中输入的内容
        this.setState({
            val:tem,
            scale:'f'
        })
    }
    render(){
                // 解构state中的数据
                let {scale,val} = this.state //将传递过来的参数，解构出来
        // 求摄氏度和华氏度
        let sheShiDu = scale==="c"?val:tryConvert(val,'toCelsius')
        // 求华氏度
        let huaShiDu = scale==='f'?val:tryConvert(val,'toFahrenheit')
        return(
            <Fragment>
                展示我们抽离出来的输入框组件，然后传递过去参数
                <TemInput scale='c' temperate={sheShiDu} onTemplateChange={this.handleC} /> 
                <TemInput scale='f' temperate={huaShiDu} onTemplateChange={this.handleF} />
                <Boil temperate={sheShiDu} />
            </Fragment>
              
        )
    }
}
export default Cal